<template>
  <div>
    <word ref="word"></word>
    <etable ref="eTable" v-show="currentState === 'normal'"
            :columns="columns" easySearchPlaceholder="标题" @btnClick="handClick" :tools="['easySearch','refresh']">
      <div slot="buttons">
        <Button type="primary" @click="add">新增</Button>
      </div>
    </etable>
    <Card v-if="currentState === 'add' || currentState === 'edit'">
      <p slot="title">
        {{title}}
      </p>
      <Form ref="formItem" :model="formItem">
        <FormItem prop="title" label="标题">
          <Input type="text" v-model="formItem.title" placeholder="标题">
          </Input>
        </FormItem>
        <FormItem label="内容">
          <tinymce-editor ref="editor" v-model="formItem.content">
          </tinymce-editor>
        </FormItem>
        <FormItem label="状态">
          <i-switch v-model="formItem.state"/>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="save">保存</Button>
          <Button style="margin-left: 15px" @click="back">返回</Button>
        </FormItem>
      </Form>
    </Card>
  </div>
</template>

<script>
import etable from '@/components/easy-table/easy-table.vue'
import word from '_c/word/word.vue'
import TinymceEditor from '_c/tinymce-editor'
import { saveNotice, infoNotice, deleteNotice } from '../../../api/sys/notice'

export default {
  name: 'notice',
  components: {
    etable,
    TinymceEditor,
    word
  },
  computed: {
    title () {
      return this.currentState === 'add' ? '新增' : '编辑'
    }
  },
  data: function () {
    return {
      formItem: {},
      url: 'sys/notice/list?',
      currentState: 'normal',
      columns: [
        {
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '标题',
          key: 'title',
          align: 'center',
          minWidth: 100
        },
        { title: '状态',
          key: 'state',
          align: 'center',
          width: 160,
          render: (h, params) => {
            const row = params.row
            const color = row.state ? 'primary' : 'error'
            const text = row.state ? '启用' : '关闭'
            return h('Tag', {
              props: {
                type: 'dot',
                color: color
              }
            }, text)
          } },
        { title: '创建人', key: 'createUserName', align: 'center', width: 120 },
        { title: '创建时间', key: 'createDate', align: 'center', width: 120 },
        {
          title: '操作',
          key: 'handle',
          align: 'center',
          width: 140,
          options: ['edit', 'preview', 'delete']
        }
      ]
    }
  },
  methods: {
    add () {
      this.formItem = {}
      this.currentState = 'add'
    },
    handClick (name, params) {
      if (name === 'delete') {
        deleteNotice(params.row.id).then(res => {
          if (res.code === 200) {
            this.init()
          }
        })
      } else if (name === 'edit') {
        infoNotice(params.row.id).then(res => {
          if (res.code === 200) {
            this.formItem = res.data
            this.currentState = 'edit'
          }
        })
      } else if (name === 'preview') {
        infoNotice(params.row.id).then(res => {
          if (res.code === 200) {
            this.$refs['word'].show(res.data.content)
          }
        })
      }
    },
    init () {
      this.$refs['eTable'].init(this.url)
    },
    save () {
      saveNotice(this.formItem).then(res => {
        if (res.code === 200) {
          this.currentState = 'normal'
          this.init()
        }
      })
    },
    back () {
      this.currentState = 'normal'
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>

</style>
